<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../static/css/shoplog.css">

    <script type="text/javascript" src="/static/jquery-3.3.1.min.js"></script>
    <script src="../static/js/free.js" type="application/javascript"></script>
    <style type="text/css">
        #content {
            display: none;
            width: 1200px;
            margin-left: auto;
            margin-right: auto;

        }

        table tr {
            padding-top: 20px;
            padding-bottom: 20px;
        }

        table td, th {
            padding-top: 15px;
            padding-bottom: 15px;
            text-align: center;
        }

        table th {
            padding-top: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e0deda;
        }

        .imgs {
            margin-left: auto;
            margin-right: auto;

        }

        .title {
            font-size: 18px;
            font-weight: bolder;

        }

        .bgn1 {
            width: 70px;
            height: 30px;
            border-radius: 1px 1px 1px 1px;
            background:white;
            color:black;
            font-weight:bold;
        }

        #hidd {
            line-height:100px;
            text-align:center;
            display: none;
            width:200px;
            height:100px;
            border-radius: 10px 10px 10px 10px;
            border:1.5px solid #e5e5e5;
            position: absolute;
            color:orangered;
            font-size:20px;
            margin-left:500px;
            background: rgba(181, 142, 243, 0.26);
            margin-top:0px;
        }
        #lastone{
            font-size:18px;
            color:dimgray;

        }

    </style>
    <title>交易记录</title>
    <script type="application/javascript">
        $(document).ready(function () {
            $(".bgn1").click(function () {
                s = $(this).attr('id')
                a = $(this).parent().parent()
                b = $(this).parent().parent().parent()
                a.remove()
                $.ajax({
                    url: '/del_read/',
                    data: {'id': s},
                    type: 'get',
                    success: function (data) {
                        $("#hidd").show().delay(2000).fadeOut();
                    }
                })
                c = b.children()
                if (c.length == 1) {
                    q = ' <table>\n' +
                        '                    <colgroup>\n' +
                        '                        <col width=300px align="left">\n' +
                        '                        <col width=300px align="left">\n' +
                        '                        <col width=300px align="left">\n' +
                        '                        <col width=300px align="left">\n' +
                        '                    </colgroup>\n' +
                        '                    <tr>\n' +
                        '                        <th>小说名称</th>\n' +
                        '                        <th>上次观看时间</th>\n' +
                        '                        <th>上次观看章节</th>\n' +
                        '                        <th>删除记录</th>\n' +
                        '                    </tr></table>' +
                        ' <table><colgroup>\n' +
                        '                        <col width=400px align="left">\n' +
                        '                        <col width=400px align="left">\n' +
                        '                        <col width=400px align="left">\n' +
                        '\n' +
                        '                    </colgroup>\n' +
                        '                        <tr><td></td></tr>\n' +

                        '            <tr><td></td><td><h3>暂无阅读记录</h3></td></tr></table>'
                    $(".read").html(q)
                }
            })

        })


    </script>
</head>
<body>
<div id="panel">
    <div>
        <iframe class="if " src="/Header/" width="1200px" frameborder="0" height="123.5px"></iframe>
    </div>
    <div style="margin-left: 20px"><p><a class="paa1" href="/self/">首页</a>><a class="paa2" href="">用户记录</a></p>
        <div id="hidd">
            删除成功!
        </div>
    </div>

    <div class="content" style="margin-left: 20px">
        <h3>用户记录</h3>
        <p class="warn">消费记录可能存在延迟，仅供参考，请以实际金额参考</p>

        <div class="item">
            <ul class="rty">
                <li style="margin-left:0px;" id="shop1" class="current">消费记录</li>
                <li id="shop2">观看记录</li>
            </ul>
        </div>
        <div id="tab-content">
            <div id="content" class="shopping">

                <table>
                    <colgroup>
                        <col width=400px align="left">
                        <col width=400px align="left">
                        <col width=400px align="left">
                        {#                        <col width=300px align="left">#}
                    </colgroup>
                    <tr>
                        <th>小说名称</th>
                        <th>消费时间</th>
                        <th>消费金额</th>
                        {#                        <th>删除记录</th>#}
                    </tr>
                    {% if blen != 0 %}
                        {% for row in contacts %}
                            <tr class="parent1">
                                <td>
                                    <div class="imgs">
                                        <img style="width:102px;height:136px;" src="{{ row.book_image }}"/>
                                    </div>
                                    <p></p>
                                    <a href="/Details/?book_id={{ row.book_id }} "
                                       style="color:rgba(20,16,29,0.85)"><span class="title">{{ row.book_name }}</span></a>
                                </td>
                                <td>{{ row.buy_time }}</td>
                                <td><span style="color:orangered">{{ row.book_price }}</span>元</td>
                                {#                    <td><a href="/del_buy/?id={{ row.buy_id }}">删除</a></td>#}
                                {#                    <td><span id="bgn">删除</span></td>#}
                            </tr>
                        {% endfor %}
                    {% else %}
                        <table>
                            <colgroup>
                                <col width=400px align="left">
                                <col width=400px align="left">
                                <col width=400px align="left">

                            </colgroup>
                            <tr>
                                <td></td>
                            </tr>


                            <tr>
                                <td></td>
                                <td><h3>暂无交易记录</h3></td>
                            </tr>
                        </table>

                    {% endif %}
                </table>
             {% if contacts.paginator.num_pages > 1 %}
                <div class="page-box-cf">
                    <div class="pagation">
                        <div class="lbf">
                            <ul class="lbf-list">
                                {% if contacts.has_previous %}
                                    <li>
                                        <a href="?page=1" style="color:black">首页</a>
                                    </li>
                                    <li class="lbf-item"><a
                                            href="?page={{ contacts.previous_page_number }}"
                                            class="lbf-bf1"><</a></li>
                                {% endif %}
                                {% if  start_index >= 1 %}
                                    <li>...</li>
                                {% endif %}
                                {% for pg in page_range %}
                                    {% if contacts.number == pg %}
                                        <li class="btn btn-default"
                                            style="font-size:25px;font-weight:bold;color:lawngreen;line-height:20px;">{{ pg }}</li>
                                    {% else %}
                                        <li>
                                            <a href="?page={{ pg }}"
                                               class="btn">{{ pg }}</a></li>
                                    {% endif %}
                                {% endfor %}
                                {% if end_index  < contacts.paginator.num_pages %}
                                    <li>...</li>
                                {% endif %}
                                {% if contacts.has_next %}
                                    <li class="lbf-item"><a
                                            href="?page={{ contacts.next_page_number }}"
                                            class="lbf-bf1">></a></li>
                                    <li>
                                        <a href="?page={{ contacts.paginator.num_pages }}" style="color:black">尾页</a>
                                    </li>
                                {% endif %}
                            </ul>
                        </div>
                    </div>
                </div>
            {% endif %}
            </div>


            <div id="content" class="read">

                <table>
                    <colgroup>
                        <col width=300px align="left">
                        <col width=300px align="left">
                        <col width=300px align="left">
                        <col width=300px align="left">
                    </colgroup>
                    <tr>
                        <th>小说名称</th>
                        <th>上次观看时间</th>
                        <th>上次观看章节</th>
                        <th>删除记录</th>
                    </tr>
                    {% if alen != 0 %}
                        {% for alist in alist %}
                            <tr class="parent1">
                                <td class="td1">
                                    <div class="imgs">
                                        <img style="width:102px;height:136px;" src="{{ alist.book_image }}"/>
                                    </div>

                                    <p></p>
                                    <a href="/Details/?book_id={{ alist.book_id }} "
                                       style="color:rgba(20,16,29,0.85)"><span
                                            class="title">{{ alist.book_name }}</span></a></td>
                                <td>{{ alist.read_time }}</td>
                                <td><a id="lastone"href="/Read/?book_id={{ alist.book_id }}&chapter_id={{ alist.chapter_id }}">{{ alist.chapter_name }}</a></td>

                                <td class="er">
                                    <button class="bgn1" id="{{ alist.book_id }}">删除</button>
                                </td>
                            </tr>
                        {% endfor %}
                    {% else %}
                        <table>
                            <colgroup>
                                <col width=400px align="left">
                                <col width=400px align="left">
                                <col width=400px align="left">

                            </colgroup>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td><h3>暂无阅读记录</h3></td>
                            </tr>
                        </table>

                    {% endif %}
                </table>

            </div>

        </div>
    </div>

</div>

</body>

</html>